<html>
<head>
    <meta charset="UTF-8">
    <title>Dom Timeline</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300italic,900italic,700italic,900,700,500italic,500,400italic,300,100italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
    
    <div id="dom-recorder" role="application" aria-label="DOM Timeline window" class="colorblind-off" is-recording-started="false" is-recording-ended="false" is-recording-playing="false">

        <div role="presentation" aria-hidden="true" id="chrome-fix" style="height: 1px; background: #ddd; display: none"></div>

        <div role="toolbar" aria-label="Actions, changes summary and settings">

            <div id="pre-recording-mode" class="tb-row" style="display: none">

                <button data-client-command="domHistory.startRecording()">Start recording</button>
                <button data-client-command="sessionStorage.domTimelineOptions_startRecordingImmediately=true; location.reload()">Reload and record</button>

            </div>

            <div id="is-recording-now-buttons" class="tb-row" style="display: none">

                <button data-client-command="domHistory.stopRecording()">Stop recording</button>

            </div>

            <div id="is-recording-ended-buttons" class="tb-row" style="display: none">

                <button id="playStopButton">Play/Stop</button>
                <button id="saveAsFileButton">Save as file</button>
                <button data-client-command="domHistory.undo()">Undo</button>
                <button data-client-command="domHistory.redo()">Redo</button>

            </div>

            <div id="right-aligned-buttons" style="position: absolute; right:0; text-align: right; vertical-align: middle;">

                <ul id="node-changes-summary" class="inline-changes" tabindex="0" aria-label="Node changes" aria-describedby="nodes-changes-summary" style="display: inline">
                    <li class="inline-changes-added" style="display: inline"><span>0</span> added,</li>
                    <li class="inline-changes-modified" style="display: inline"><span>57</span> modified,</li>
                    <li class="inline-changes-removed" style="display: inline"><span>0</span> removed</li>       
                </ul>

                <!-- todo: show them when we switch to full-height style -->
                <input type="text" placeholder="Filter results by keyword..." style="display: none" />

                <button id="open-settings-button" title="Settings" aria-label="Settings">
                    <svg viewbox="0 0 100 100" width="16px" height="16px" style="vertical-align: middle" aria-hidden="true">
                        <path fill="currentColor" d="M87.687 45.077c-.313-2.433-.816-4.807-1.542-7.08l8.145-11.73-5.827-7.514-.094-.123-5.825-7.514-12.955 5.577c-2.04-1.265-4.192-2.362-6.46-3.22L59.42 0H40.587l-3.71 13.474c-2.27.857-4.42 1.955-6.463 3.222L17.457 11.12l-5.825 7.513-.097.124-5.822 7.517 8.146 11.73c-.727 2.272-1.234 4.646-1.545 7.08L0 52.032l2.08 9.375.033.15 2.08 9.375 14 .76c1.296 2.03 2.772 3.927 4.4 5.67L20.2 91.587l8.416 4.173.138.068L37.17 100l9.308-10.796c1.16.11 2.335.173 3.524.173s2.358-.074 3.52-.184l9.317 10.804 8.414-4.173.14-.066 8.414-4.172-2.396-14.228c1.628-1.74 3.104-3.64 4.4-5.672l14-.76 2.078-9.374.035-.154L100 52.025l-12.313-6.948zM50.003 34.51c8.435 0 15.272 7.035 15.272 15.72 0 8.678-6.84 15.716-15.272 15.716-8.436 0-15.272-7.038-15.272-15.717 0-8.685 6.84-15.72 15.273-15.72z" />
                    </svg>
                </button>

            </div>

        </div>

        <nav aria-label="Timeline" onwheel="var nav = this; clearTimeout(nav.wheelTimer); nav.style.pointerEvents='none'; nav.wheelTimer=setTimeout(function() { nav.style.pointerEvents='' }, 300)">

            <div id=timeline-wrapper>
                
                <div id="wrapper-timeline">
                    <div id="offsetW"></div>
                    <div class="seconds-list"></div>
                    <div id="timeline">
                        <div id="timeline-seek" style="width: 2px; position: absolute; top: 0px; left: 0px; bottom: 0px; background: black; opacity: 0.5; cursor: pointer; transform: translateX(0px);"></div>
                        <span id="lev" class="lev" style="width: 0px; display: none;">
                            <span class="lev1 handle"></span>
                            <span class="lev2 handle"></span>
                            <span class="drag-lev"></span>
                        </span>
                        <span id="fake-lev" class="lev" style="width: 0px; opacity: 0.5; display: none;">
                            <span class="lev1 handle"></span>
                            <span class="lev2 handle"></span>
                            <span class="drag-lev"></span>
                        </span>
                        <span id="timeline-content"></span>
                    </div>
                </div>
            
            </div>

            <div id="preview-wrapper" style="width: 110px; flex: 0 0 110px; padding: 10px; padding-right: 0px; overflow: hidden;">
                <iframe id=domtimeline-popup name=domtimeline-popup frameborder=0 border=0 allowtransparency allowfullscreen style="background: black; width: 1000px; height: 600px; transform-origin: 0 0; transform: scale(0.1);" aria-hidden="true"></iframe>
            </div>

        </nav>

        <aside id="settings" aria-label="Settings pane" tabindex="0" style="display: none">
            <input type="button" id="close-settings-button" value="Close the settings pane" />
            <hr role="presentation">
            <form aria-label="DOM Breakpoints" id="breakpoints-code-form" onsubmit="return false;">
                <details style="font-size: 12px">
                    <summary>DOM Breakpoints <span style="color: gray;font-weight: normal;float: right;">Click here for more details.</span></summary>
                    <aside style="padding: 12px; color: gray">

                        <p>
                            As soon as you will start recording, 
                                DOM Timeline offers you the opportunity to break into javascript
                                whenever a specific kind of change happens.
                            This is useful for debugging purposes.

                        <p>
                            <img alt="" width="224" height="79" src="">

                        <p>
                            You can use any javascript code to determine when to break into an event,
                                and explore the "m" variable, which is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord">mutation record</a>.
                            In addition, you can use 
                                m.claim (a string that represents how this mutation was being executed) and
                                m.stack (the javascript callstack at the time of the change).
                            <br/><br/>

                        <p>
                            Examples of things you can do (and their convenient shortcut, if any):
                        <dl>

                            <dt>ATTRIBUTES: Detect changes of the style attribute on an element whose id is "abc"</dt>
                            <dd>
                                <pre>if(attributeChanged('style') && matches('#abc', m.target)) { debugger; }</pre>
                                <pre>if(m.type == 'attributes' && m.target && m.target.id == 'abc' && m.attributeName == 'style') { debugger; }</pre>
                            </dd>
                            
                            <dt>ATTRIBUTES: Detect when the 'selected' class is added to an element</dt>
                            <dd>
                                <pre>if(attributeChanged('class', {newlyContains:'selected'})) { debugger; }</pre>
                                <pre>if(m.type == 'attributes' && m.attributeName == 'class' && (!m.oldValue || m.oldValue.indexOf('selected') == -1) && (m.newValue && m.newValue.indexOf('selected') >= 0)) { debugger; }</pre>
                            </dd>

                            <dt>ATTRIBUTES: Detect when the 'tabindex' attribute is added to an element</dt>
                            <dd>
                                <pre>if(attributeChanged('class', {oldValue:null})) { debugger; }</pre>
                                <pre>if(m.type == 'attributes' && m.attributeName == 'tabindex' && m.oldValue == null) { debugger; }</pre>
                            </dd>

                            <dt>NODES: Detect when a node with a given id is removed from the document</dt>
                            <dd>
                                <pre>if(anyRemovedNode(n => n.id=='abc', { deep: false })) { debugger; }</pre>
                                <pre>if(m.removedNodes && m.removedNodes.length && [].slice.call(m.removedNodes, 0).some(n => n.id=='abc').length) { debugger; }</pre>
                            </dd>

                            <dt>NODES: Detect when a node with a given id is added to the document</dt>
                            <dd>
                                <pre>if(anyAddededNode(n => n.id=='abc', { deep: false })) { debugger; }</pre>
                                <pre>if(m.addedNodes && m.addedNodes.length && [].slice.call(m.addedNodes, 0).some(n => n.id=='abc').length) { debugger; }</pre>
                            </dd>

                            <dt>NODES: Detect when a node with a given html content is added to the document</dt>
                            <dd>
                                <pre>if(anyAddededNode(n => n.innerHTML.indexOf('Microsoft')>=0, { deep: false })) { debugger; }</pre>
                                <pre>if(m.addedNodes && m.addedNodes.length && [].slice.call(m.addedNodes, 0).some(n => n.id=='abc').length) { debugger; }</pre>
                            </dd>

                            <dt>NODES: Detect when any change happens within a link without href</dt>
                            <dd>
                                <pre>if(closest('a', m.target, link => !link.href)) { debugger; }</pre>
                            </dd>

                        </dl>

                    </aside>
                </details>
                <input type="checkbox" id="are-breakpoints-enabled" checked />
                <label for="are-breakpoints-enabled" aria-hidden="true">Enable DOM Breakpoints </label>
                <textarea id="breakpoints-code" title="Javascript code for dom breakpoints. Use 'debugger;' to open your debugger." style="display: block; height: 200px; width: 100%;">//if(true) { debugger; };
    
function closest(selector, node, converter) {
    while(node && !matches(selector, node)) {
        node = node.parentNode;
    }
    return node ? converter(node) : node;
}

function matches(selector, node) {
    var matches = node.matches || node.webkitMatchesSelector || node.mozMatchesSelector || node.msMatchesSelector || function() { return false };
    return matches.call(node, selector);
}

function anyNodeInList(nodes, match, options) {
    if(!nodes || nodes.length == 0) return false;
    if(!options) options = { deep: true };
    for(var i = nodes.length; i--;) {
        if(match(nodes[i])) return true;
        if(options.deep != false) {
            if(anyNodeInList(nodes[i].childNodes, match, options)) {
                return true;
            }
        }
    }
}

function anyNode(match, options) {
	if (match instanceof Function) {
		return match(m.target) || anyAddedNode(match, options) || anyRemovedNode(match, options);
	} else {
		return anyNode(function(node) { return matches(match, node); }, options);
	}
}

function anyAddedNode(match, options) {
	if (match instanceof Function) {
		return anyNodeInList(m.addedNodes, match, options);
	} else {
		return anyNodeInList(m.addedNodes, function(node) { return matches(match, node); }, options);
	}
}

function anyRemovedNode(match, options) {
	if (match instanceof Function) {
		return anyNodeInList(m.removedNodes, match, options);
	} else {
		return anyNodeInList(m.removedNodes, function(node) { return matches(match, node); }, options);
	}
}

function attributeAdded(name) {
    return m.type == 'attributes' && m.newValue != null && m.oldValue == null;
}

function attributeRemoved(name) {
    return m.type == 'attributes' && m.newValue == null && m.oldValue != null;
}

function attributeChanged(name, options) {
    var matches = m.type == 'attributes';
    matches = matches && (name===undefined || (m.attributeName === name));
    matches = matches && (options.newValue===undefined || (m.newValue === options.newValue));
    matches = matches && (options.newValueContains===undefined || (m.newValue && m.newValue.indexOf(options.newValueContains) >= 0));
    matches = matches && (options.oldValue===undefined || (m.oldValue === options.oldValue));
    matches = matches && (options.oldValueContains===undefined || (m.oldValue && m.oldValue.indexOf(options.oldValueContains) >= 0));
    matches = matches && (options.newlyContains===undefined || (
        (!m.oldValue || m.oldValue.indexOf(options.newlyContains) == -1) 
        && (m.newValue && m.newValue.indexOf(options.newlyContains) >= 0)
    ));
    matches = matches && (options.previouslyContained===undefined || (
        (!m.newValue || m.newValue.indexOf(options.previouslyContained) == -1) 
        && (m.oldValue && m.oldValue.indexOf(options.previouslyContained) >= 0)
    ));
    return matches;
}
    </textarea>
                <input id="save-breakpoints-code" type="submit" value="Save dom breakpoints settings" />
            </form>
            <hr role="presentation">
            <form aria-label="More information" id="breakpoints-code-form" onsubmit="return false;">
                <a href="https://github.com/FremyCompany/dom-timeline-core">Find other ways to customize the dom timeline's data collection on its Github repository</a>
            </form>
            <hr role="presentation">
            <a href="#settings" onclick="document.querySelector('.plugin-domtimeline #settings').focus(); return false;">Return to the top of settings</a>
        </aside>

        <main aria-label="DOM Timeline content pane">

            <div id="node-changes">
                <ul class="accordion-changes"></ul>
            </div>

        </main>

        <style>

            .plugin-domtimeline {
                overflow-y: scroll;
            }

            .plugin-domtimeline * {
                box-sizing: border-box;
            }

            .plugin-domtimeline *:focus {
                outline: 2px solid #00b7c7;
            }

            details { display: block; font-weight: normal !important; }
            details > summary { font-weight: bold; cursor: pointer; }
            details:not([open]) > aside { display: none; }
            details:not([open]) > summary { display: block; }
            details:not([open]) > summary:focus + aside { display: block; }
            #if-css-supports ::-webkit-details-marker, details:not([open]) > aside { display: block; }
            #if-css-supports ::-moz-details-marker,    details:not([open]) > aside { display: block; }
            #if-css-supports ::-ms-details-marker,     details:not([open]) > aside { display: block; }
            #if-css-supports ::details-marker,         details:not([open]) > aside { display: block; }

            .plugin-domtimeline dl > dt { margin-top: 10px; font-weight: bold; }
            .plugin-domtimeline pre { font-family: 'Consolas', monospace; max-width: 100%; overflow-x: hidden; }
            .plugin-domtimeline pre:hover { overflow-x: auto; overflow-x: overlay; -ms-overflow-style: -ms-autohiding-scrollbar; }

            .plugin-domtimeline #dom-recorder {
                margin: auto;
                padding: 10px;
                font-size: 16px;
                position: relative;
            }

            #dom-recorder div[role="toolbar"] {
                position: absolute; z-index: 1; height: 32px;
                top: 0px; left: 0px; right: 0px; 
                display: flex; flex-direction: row;
                background: #f5f5f5; background-clip: padding-box; padding: 3px 10px;
            }

            #dom-recorder div[role="toolbar"] > div.tb-row {
                display: flex; flex-direction: row;
            }

            #dom-recorder div[role="toolbar"] > div.tb-row > button {
                -webkit-appearance: none; -moz-appearance: none; appearance: none;
                font-family: Segoe 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 10px; padding: 4px 15px;
                background: transparent; color: currentColor;
                border: none; border-right: 1px solid silver; border-radius: 0px; 
                vertical-align: middle; margin: 0px;
            }

            #dom-recorder > div[role="toolbar"] > div.tb-row > button:first-of-type {
                font-weight: bold;
            }

            #dom-recorder > div[role="toolbar"] > div.tb-row > button:hover {
                background: purple; color: white; border-right-color: transparent;
            }

            #dom-recorder > nav {
                position: absolute; z-index: 1; 
                top: calc(32px + 10px); left: 10px; right: 10px; height: 80px;
                display: flex; flex-direction: row;
                background: white; outline: 10px solid white;
            }
            #primary-button-wrapper {
                width: 90px; text-align: left;
            }
            #timeline-wrapper {
                flex: 1 1 0px; width: 0px; min-width: 0px;
                position: relative;
            }
            #summary-wrapper {
                width: 130px;
                padding-left: 10px;
            }
            #actions-wrapper {
                width: 250px;
                text-align: right;
            }
            #dom-recorder > main {
                margin-top: calc(32px + 80px + 10px + 10px);
            }

            .plugin-domtimeline #options {
                margin-bottom: 20px;
            }

            .plugin-domtimeline #option-autorecord, #option-colorblind {
                display: inline;
            }

            .plugin-domtimeline #option-autorecord {
                float:left;
            }

            .plugin-domtimeline #option-colorblind {
                float:right;
            }

            .plugin-domtimeline #dom-recorder[is-recording-started="false"] #pre-recording-mode {
                display: flex !important;
            }
            .plugin-domtimeline  #dom-recorder[is-recording-started="true"] #recording-mode {
                display: flex !important;
            }

            /*#is-recording-now-buttons, #is-recording-ended-buttons {
                position: absolute;
                top: 8px; right: 8px;
                z-index: 10000;
            }*/

            .plugin-domtimeline #dom-recorder[is-recording-started="true"][is-recording-ended="true"] #is-recording-ended-buttons {
                display: flex !important;
            }
            .plugin-domtimeline  #dom-recorder[is-recording-started="true"][is-recording-ended="false"] #is-recording-now-buttons {
                display: flex !important;
            }

            .plugin-domtimeline #wrapper-timeline {
                overflow-x: /*auto*/hidden;
                overflow-y: hidden;
                width: 100%;
                position: relative;
                padding-bottom: 10px;
                margin-bottom: 0px;
            }

            .plugin-domtimeline #timeline {
                cursor: crosshair;
                height: 100px;
                background-color: #FBFAF7;
                background-image: url('/vorlon/plugins/domtimeline/images/rule.png');
                background-repeat: repeat-x;
                background-size: calc(6 * 61em / 16);
                position: relative;
                touch-action: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -moz-user-drag: none;
                user-drag: none;
            }

            .plugin-domtimeline #dom-recorder[is-recording-playing="true"] #timeline,
            .plugin-domtimeline #dom-recorder[is-recording-playing="true"] #timeline * {
                cursor: no-drop !important;
                cursor: not-allowed !important;
            }

            .plugin-domtimeline .clear {
                clear: both;
                color: #75655E;
            }

            .plugin-domtimeline #node-changes {
                position: relative;
            }

            .plugin-domtimeline #node-changes input {
                position: absolute;
                right: 0px;
                top: 25px;
                padding: 5px 8px;
                border-radius: 5px;
                border: 1px solid #EEE9E0;
                outline: none;
            }

            .plugin-domtimeline #node-changes h1 {
                font-family: 'Oswald';
                text-transform: uppercase;
                font-size: 22px;
                font-weight: 500;
                margin-top: 0px;
                margin-bottom: 5px;
                color: #000000;
            }

            .plugin-domtimeline ul.inline-changes {
                padding: 0;
                margin: 0;
                list-style-type: none;
                margin-bottom: 20px;
                margin-left: 1px;
                margin-top: 5px;
            }

            .plugin-domtimeline ul.inline-changes li {
                /*display: inline;*/
                margin-right: 5px;
                font-size: 13px;
            }

            .plugin-domtimeline ul.inline-changes li:before {
                content: '';
                width: 10px;
                height: 10px;
                position:relative;
                margin-right: 5px;
                display: inline-block;
            }

            .plugin-domtimeline .colorblind-off ul.inline-changes li.inline-changes-added:before {
                background-color: #007C29;   
            }

            .plugin-domtimeline .colorblind-off ul.inline-changes li.inline-changes-removed:before {
                background-color: #F2002D;   
            }

            .plugin-domtimeline .colorblind-off ul.inline-changes li.inline-changes-modified:before {
                background-color: #223879;   
            }

            .plugin-domtimeline .colorblind-on ul.inline-changes li.inline-changes-added:before {
                background-color: #555555;
            }

            .plugin-domtimeline .colorblind-on ul.inline-changes li.inline-changes-removed:before {
                background-color: none;
                border: 1px solid #555555;
            }

            .plugin-domtimeline .colorblind-on ul.inline-changes li.inline-changes-modified:before {
                background-color: none;
                border: 1px solid #555555;
                background-image: url('/vorlon/plugins/domtimeline/images/blind.png');
            }

            .plugin-domtimeline 
            ul.accordion-changes {
                /* height: 260px; */
                padding: 0;
                margin: 0;
                /* border: 1px solid #E0E0E0; */
                list-style-type: none;
                /* overflow-y: scroll; */
                overflow-x: hidden;
            }

            .plugin-domtimeline ul.accordion-changes li {
                position: relative;
                cursor: pointer;
                padding: 6px 10px; 
                font-weight: normal;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 9pt;
                white-space: nowrap;
                border-bottom: 1px solid #E0E0E0;
            }

            .plugin-domtimeline ul.accordion-changes li[data-id][is-cancelled="true"] {
                text-decoration: line-through;
                opacity: 0.40;
            }
            .plugin-domtimeline ul.accordion-changes li[data-id][is-cancelled="true"] + li.acc {
                opacity: 0.40;
            }

            .plugin-domtimeline ul.accordion-changes li[data-id][is-outside-selection="true"] {
                display: none !important;
            }
            .plugin-domtimeline ul.accordion-changes li[data-id][is-outside-selection="true"] + li.acc {
                display: none !important;
            }

            .plugin-domtimeline ul.accordion-changes .td-name {
                font-weight: bold;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 9pt;
                white-space: nowrap;
            }

            .plugin-domtimeline ul.accordion-changes li.hide-change {
                background: rgba(107, 45, 129, 0.58);
                opacity: 0.7;
            }

            .plugin-domtimeline ul.accordion-changes li.hide-change::before {
                visibility: hidden;
            }
            .plugin-domtimeline ul.accordion-changes li.hide-change > * {
                visibility: hidden;
            }

            .plugin-domtimeline ul.accordion-changes li .fa-undo {
                display: none;
                cursor: pointer;
                margin-right: 10px;
                position: absolute; right: 30px; top: 9px;
                background: white; outline: 5px solid white;
            }

            .plugin-domtimeline ul.accordion-changes li:hover .fa-undo{
                display: inline;
            }

            .plugin-domtimeline ul.accordion-changes li[data-id]::before {
                display: inline-block;
                content: "";
                width: 8px;
                height: 15px;
                margin-right: 13px;
                transition: all linear 0.2s;
                vertical-align: bottom;
            } 

            .plugin-domtimeline ul.accordion-changes li[data-id][data-are-details-visible="true"]::before {
                -ms-transform: rotate(90deg); /* IE 9 */
                -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
                transform: rotate(90deg);
            }

            .plugin-domtimeline .colorblind-off ul.accordion-changes li.accordion-changes-added[data-id]::before {
                background-image: url('/vorlon/plugins/domtimeline/images/arrow-green.png');
            }

            .plugin-domtimeline .colorblind-off ul.accordion-changes li.accordion-changes-removed[data-id]::before {
                background-image: url('/vorlon/plugins/domtimeline/images/arrow-red.png');
            }

            .plugin-domtimeline .colorblind-off ul.accordion-changes li.accordion-changes-modified[data-id]::before {
                background-image: url('/vorlon/plugins/domtimeline/images/arrow-blue.png');
            }

            .plugin-domtimeline .colorblind-on ul.accordion-changes li.accordion-changes-added[data-id]::before {
                background-image: url('/vorlon/plugins/domtimeline/images/arrow-green-b.png');
            }

            .plugin-domtimeline .colorblind-on ul.accordion-changes li.accordion-changes-removed[data-id]::before {
                background-image: url('/vorlon/plugins/domtimeline/images/arrow-red-b.png');
            }

            .plugin-domtimeline .colorblind-on ul.accordion-changes li.accordion-changes-modified[data-id]::before {
                background-image: url('/vorlon/plugins/domtimeline/images/arrow-blue-b.png');
            }

            .plugin-domtimeline ul.accordion-changes li[data-id][data-are-details-visible="true"] + li {
                display: block !important;
            }

            .plugin-domtimeline 
            ul.accordion-changes li > span {
                position: absolute; right: 5px; top: 7px;
                background: white; outline: 5px solid white;
            }

            .plugin-domtimeline .seconds-list {
                position: relative;
                height: calc(22em / 16);
                cursor: -moz-grab;
                cursor: -webkit-grab;
                cursor: grab;
            }

            .plugin-domtimeline .seconds-list span {
                position: absolute;
                display: inline-block;
                width: calc(61em / 16);
            }

            .plugin-domtimeline #timeline div {
                position: absolute;
                bottom: 0px;
                width: calc(10em / 16);
                display: inline-block;
            }

            .plugin-domtimeline #timeline div span {
                cursor: pointer;
                float: left;
                width: 100%;
                display: inline-block;
            }

            .plugin-domtimeline .colorblind-off #timeline div span.added_h {
                background-color: #007C29;
            }

            .plugin-domtimeline .colorblind-off #timeline div span.removed_h {
                background-color: #F2002D;
            }

            .plugin-domtimeline .colorblind-off #timeline div span.modified_h {
                background-color: #223879;
            }

            .plugin-domtimeline .colorblind-on #timeline div span.added_h {
                background-color: #555555;
            }

            .plugin-domtimeline .colorblind-on #timeline div span.removed_h {
                background-color: none;
                border: 1px solid #555555;
            }

            .plugin-domtimeline .colorblind-on #timeline div span.modified_h {
                background-color: none;
                border: 1px solid #555555;
                background-image: url('/vorlon/plugins/domtimeline/images/blind.png');
            }

            .plugin-domtimeline .acc {
                display: none;
                padding: 0px !important;
                display: block;
                overflow: hidden;
                transition: all linear 0.3s;
                border-bottom: none !important;
            }

            .plugin-domtimeline .acc table {
                padding: 5px 0 5px 40px;
                display: block;
            }

            .plugin-domtimeline .acc table .td-name {
                margin-right: 15px;
                padding-right: 20px;
            }

            .plugin-domtimeline .acc table code {
                font-family: "Consolas", monospace;
                font-size: 11px;
                white-space: pre-line;
            }

            .plugin-domtimeline .lev {
                background: transparent;
                height: 100%;
                position: relative;
                left: 61px;
                display: inline-block;
                cursor: -moz-grab;
                cursor: -webkit-grab;
                cursor: grab;
                border: 1px solid #6B2D81;
                z-index: 10;
            }

            .plugin-domtimeline .lev .drag-lev {
                display: block;
                width: 100%;
                height: 100%;
            }

            .plugin-domtimeline .lev .handle {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                cursor: col-resize;
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none;   /* Chrome/Safari/Opera */
            -khtml-user-select: none;    /* Konqueror */
            -moz-user-select: none;      /* Firefox */
            -ms-user-select: none;       /* Internet Explorer/Edge */
            user-select: none;           /* Non-prefixed version, currently
                                            not supported by any browser */
            display: inline-block;
            background: url('/vorlon/plugins/domtimeline/images/lev.png');
            width: 14px;
            height: 19px;
            }

            .plugin-domtimeline .lev .lev1 {
                left: -7px;
            }

            .plugin-domtimeline .lev .lev2 {
                right: -7px;
            }

            .plugin-domtimeline #history-control {
                margin-top: 20px;
            }

            .plugin-domtimeline button {
                background: #D7CDBF;
                padding: 5px 15px;
                border-radius: 5px;
                border: 1px solid #D7CDBF;
                cursor: pointer;
            }

            .plugin-domtimeline button:hover {
                background: purple;
                color: white;
            }

            .plugin-domtimeline button:active:hover {
                background: darkmagenta;
                color: violet;
            }


            .plugin-domtimeline .ui-selectable-helper {
                background: #482045;
                opacity: 0.5;
            }

            .plugin-domtimeline #offsetW {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
                top: 0px !important;
                left: 0px !important;
                z-index: 555;
                display: none;
            }

            .plugin-domtimeline #filter-changes {
                margin-bottom: 20px;
                display:none;
            }

            .plugin-domtimeline #filter-changes input {
                width: 40px;
                margin-right: 3px;
            }

            .plugin-domtimeline #filter-changes a {
                text-decoration: none;
                margin-left: 10px;
            }

            /* SETTINGS */
            .plugin-domtimeline #dom-recorder[is-settings-pane-open="true"] > #settings {
                display: block !important;
            }

            .plugin-domtimeline #dom-recorder[is-settings-pane-open="true"] > * {
                display: none;
            }

            .plugin-domtimeline #settings #are-breakpoints-enabled:not(:checked) ~ #breakpoints-code {
                display: none !important
            }

            .plugin-domtimeline #settings p { margin-bottom: 5px }
            .plugin-domtimeline #settings pre { margin: 3px 0px; border: 1px dashed silver; background: #eee; padding: 2px; }




        </style>

    </div>

</body>
</html>